<template>
	<view class="container">
		<view class="wrapper">
			<view class="show-content">
				<view class="check-img">
					<view :class="payment_state"></view>
				</view>
				<view class="tip">
					{{order_info.order_state >= 20 ? 'Payment Successfully' : 'Payment Failed'}}
				</view>
				<view class="introduction">
					thank you for shopping Handyfix !
				</view>
				<button class="btn" @click="backHome">Back to Home</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				t: 0,
				order_no: '',
				order_info: {}
			}
		},
		computed: {
			payment_state() {
				return this.order_info.order_state >= 20 ? 'success' : 'fail'
			} 
		},
		onLoad(query){
			this.order_no = query.order_no
			
			this.orderPayCheck();
		},
		methods: {
			// 返回首页
			backHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			orderPayCheck() {
				this.$api.orderDetail({
					__silent_mode__: true,
					order_no: this.order_no
				}, res => {
					this.order_info = res.data

					clearTimeout(this.t)
					if (this.order_info && this.order_info.order_state == 10) {
						// 未支付，重新查询
						this.t = setTimeout(() => {
							this.orderPayCheck()
						}, 2000)
					}
				})
			}
		},
	}
</script>

<style lang='scss'>
	page{
		background: #fff;
	}
	.check-img view{
		color: #FFFFFF;
		font-size: 120rpx;
		line-height: 160rpx;
		&.success::before {
			content: '√';
		}
		&.fail::before {
			content: '×';
		}
	}
	.container{
		position:relative;
		overflow: hidden;
		background: #fff;
	}
	.wrapper{
		position:relative;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		.show-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.check-img {
				width: 160rpx;
				height: 160rpx;
				line-height: 160rpx;
				box-shadow: 0 20rpx 60rpx rgba(64, 191, 255, 0.24);
				border-radius: 50%;
				background: #EB658D;
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					width: 40%;
					height: 30%;
				}
			}
			.tip {
				font-family: Poppins;
				font-size: $font-lg + 16upx;
				font-weight: bold;
				color: #223263;
				text-align: center;
				padding: 0 10%;
				margin-top: 32rpx;
				line-height: 150%;
				letter-spacing: 1rpx;
			}
			.introduction {
				font-family: Poppins;
				font-size: $font-sm;
				text-align: center;
				color: #223263;
				opacity: 0.5;
				margin-top: 48rpx;
				letter-spacing: 1rpx;
			}
			.btn {
				margin-top: 32rpx;
				width: 700upx;
				height: 100upx;
				line-height: 100upx;
			}
		}
	}
</style>
